<!--
author:        hejy <silentmanager@163.com>
date:          2024-11-02 17:23:48
component:     detail
Copyright © YourCompanyName All rights reserved
-->
<template>
  <el-drawer :model-value="modelValue" title="客户详情" :size="'50%'" @close="handleClose">
    <el-tabs v-model="activeName" class="demo-tabs">
      <!-- 客户信息 -->
      <el-tab-pane label="客户信息" name="first">
        <!-- 客户信息 -->
        <el-divider direction="horizontal" content-position="left">客户信息</el-divider>
        <el-descriptions :border="true">
          <el-descriptions-item label="姓名">{{ detailItem?.name || '--' }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            detailItem?.mobile || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{
            detailItem?.detailAddress || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="类型">{{ detailItem?.level || '--' }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ detailItem?.sex || '--' }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ detailItem?.age || '--' }}</el-descriptions-item>
        </el-descriptions>
        <!-- 近期购买 -->
        <el-divider content-position="left">近期购买</el-divider>
        <el-descriptions :border="true">
          <el-descriptions-item label="商品名称">{{
            detailItem?.goodsName || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="套餐总金额">{{
            detailItem?.goodsAmount || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="箱数">{{
            detailItem?.goodsNumber || '--'
          }}</el-descriptions-item>
          <el-descriptions-item label="订单号">{{
            detailItem?.orderNo || '--'
          }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <!-- 客户跟进备注 -->
      <el-tab-pane label="客户跟进备注" name="second">
        <el-button type="warning" @click="showDialog">添加备注</el-button>
        <el-table v-loading="loading" :data="remarkList" style="width: 100%">
          <el-table-column label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 + (queryParams.pageNo - 1) * queryParams.pageSize }}
            </template>
          </el-table-column>
          <el-table-column label="备注内容" prop="content" />
          <el-table-column label="创建人" prop="creator" />
          <el-table-column label="创建时间" prop="createTime" />
          <el-table-column label="操作" width="300">
            <template #default="scope">
              <div style="display: flex">
                <el-button
                  v-hasPermi="['crm:customer:remark:delete']"
                  link
                  type="warning"
                  @click="handleDeleteRemark(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getRemarkList"
        />
      </el-tab-pane>
      <!-- 拿酒记录 -->
      <el-tab-pane v-if="getWine" label="拿酒记录" name="third">
        <el-card>
          <el-table v-loading="listLoading" :data="list" style="width: 100%">
            <el-table-column label="序号" width="80">
              <template #default="scope">
                {{ scope.$index + 1 + (queryParams.pageNo - 1) * queryParams.pageSize }}
              </template>
            </el-table-column>
            <el-table-column label="套餐名称" prop="packageName" />
            <el-table-column label="订单状态" prop="orderStatusName" />
            <el-table-column label="录单人" prop="userName" />
            <el-table-column label="录单人班组" prop="deptName" />
            <el-table-column label="对接人" prop="contactName" />
            <el-table-column label="录单时间" prop="createTime" />
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!-- 备注弹窗 -->
    <RemarkDialog
      :remark-id="detailItem?.id"
      v-model:visible="isDialogVisible"
      @success="getDrawerAntOut"
    />
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import RemarkDialog from './remark.vue'
import {
  deleteFollowUpRecord,
  pageCustomerUser,
  pageFollowUpRecord,
  pageFollowUpRecordRes
} from '@/api/customer'
import { orderDrinkRecord, orderDrinkRecordRes } from '@/api/statistical-report'

const message = useMessage()
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void // 添加 success 事件
}>()
const { modelValue, detailItem } = defineProps<{
  modelValue: boolean
  detailItem: pageCustomerUser | undefined
  getWine?: boolean
}>()

// ----------------------------- 备注弹窗状态 -----------------------------
const isDialogVisible = ref<boolean>(false) // 定义对话框可见性的状态
// 显示弹窗的处理函数
const showDialog = () => {
  isDialogVisible.value = true // 显示弹窗
}
//  ==================== 备注列表  ====================
const loading = ref(true) // 列表的加载中
const remarkList = ref<pageFollowUpRecordRes[]>([])
const total = ref(0) // 列表的总页数
// 分页
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
const getRemarkList = async () => {
  loading.value = true
  try {
    const res = await pageFollowUpRecord({
      ...queryParams,
      bizId: detailItem?.id || 0
    })
    remarkList.value = res.list
    total.value = res.total
    loading.value = false
  } catch (e) {
    loading.value = false
    console.error(e)
  }
}
const getDrawerAntOut = () => {
  getRemarkList()
  emit('success')
}
const handleDeleteRemark = async (row) => {
  try {
    await deleteFollowUpRecord(row.id)
    message.success('删除成功')
    getRemarkList()
  } catch (e) {
    console.error(e)
  }
}
//  ==================== tab  ====================
const activeName = ref('first')
// 监听 activeName 的变化
watch(activeName, (newValue) => {
  if (newValue === 'second') {
    getRemarkList()
  }
  if (newValue === 'third') {
    getList()
  }
})

const handleClose = () => {
  emit('update:modelValue', false) // 关闭抽屉
}

const listLoading = ref(true) // 列表的加载中
const listTotal = ref(0) // 列表的总页数
const list = ref<orderDrinkRecordRes[]>([]) // 列表的数据
/** 查询列表 */
const getList = async () => {
  listLoading.value = true
  try {
    const data = await orderDrinkRecord({
      mobile: detailItem?.mobile as string
    })
    list.value = data.list
    listTotal.value = data.total
  } finally {
    listLoading.value = false
  }
}
</script>

<style scoped></style>
